<template>
    <div>
        <el-dialog v-bind="$attrs" v-on="$listeners" :visible.sync="showDialog" @open="onOpen" @close="onClose" title="添加用户">
            <el-row :gutter="15">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
                    <el-col :span="12">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="formData.username" placeholder="请输入用户名" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="formData.nickname" placeholder="请输入昵称" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="手机" prop="phoneNumber">
                            <el-input v-model="formData.phoneNumber" placeholder="请输入手机" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="formData.sex" size="medium">
                                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                                          :disabled="item.disabled">{{item.label}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="formData.email" placeholder="请输入邮箱" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="生日" prop="birth">
                            <el-date-picker v-model="formData.birth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                            :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="handelConfirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {updateUser} from "../../api/users";

    export default {
        name: "UserUpdate",
        props: {
            addOrUpdateVisible2:{
                type: Boolean,
                default: false
            },
            formData: {}
        },
        data() {
            return {
                // 控制弹出框显示隐藏
                showDialog:false,
                rules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    departmentId: [{
                        required: true,
                        message: '请选择部门',
                        trigger: 'change'
                    }],
                    nickname: [{
                        required: true,
                        message: '请输入昵称',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '性别不能为空',
                        trigger: 'change'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }],
                    phoneNumber: [{
                        required: true,
                        message: '请输入手机',
                        trigger: 'blur'
                    }],
                    birth: [{
                        required: true,
                        message: '请选择生日',
                        trigger: 'change'
                    }],
                },
                field101Action: 'https://jsonplaceholder.typicode.com/posts/',
                field101fileList: [],
                departmentIdOptions: [{
                    "label": "选项一",
                    "value": 1
                }, {
                    "label": "选项二",
                    "value": 2
                }],
                sexOptions: [{
                    "label": "帅哥",
                    "value": 1
                }, {
                    "label": "美女",
                    "value": 2
                }],
            }
        },
        computed: {},
        watch: {
            // 监听 addOrUpdateVisible 改变
            addOrUpdateVisible2(oldVal,newVal){
                this.showDialog = this.addOrUpdateVisible2
            },
        },
        created() {},
        mounted() {},
        methods: {
            onOpen() {

            },
            onClose() {
                this.$refs['elForm'].resetFields()
                this.$emit('changeShow', 'false')
            },
            close() {
                this.$emit('changeShow', 'false')
            },
            /**
             * 确定修改用户
             */
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) {
                        //校验失败返回
                        return
                    }
                    console.log(this.user)
                    this.update()
                })
            },
            //修改用户
            async update () {
                const { data: res } = await updateUser(this.formData)
                if (res.code == 200) {
                    this.$notify.success({
                        title: '操作成功',
                        message: '用户修改成功',
                    })
                    //关闭 窗口
                    this.$emit('changeShow', 'false')
                    //清空数据
                    this.formData = {}
                    //this.$parent.getUserList();
                    //重新查询数据 调用getUserList和getDeptAndCount
                    this.$emit('getUserList');
                    this.$emit('getDeptAndCount');
                    //this.$parent.getDeptAndCount();
                } else {
                    return this.$message.error('用户修改失败:' + res.message)
                }
            },
        }
    }

</script>
<style>
    .el-upload__tip {
        line-height: 1.2;
    }

</style>